<template>
<div class="suggest-card-wrapper g-flex-sb-start" :style="{ 'width':width, 'background-image': 'url('+backImg[index]+')' }">
  <div class="left">
    <div class="content">
      <div class="text">{{titleAndTips[index][0]}}</div>
      <div class="text">{{titleAndTips[index][1]}}</div>
    </div>
    <div class="btn g-flex-c" :style="{color: btn[index]}" @click="$router.push({path: '/home/index'})">
      <span>{{btnName}}</span>
    </div>
  </div>
</div>
</template>

<script>
import {ossUrl} from '@/utils/config'
export default {
  props: {
    index: [String, Number],
    width: {
      type: String,
      default: '24%'
    },
  },
  data() {
    return {
      titleAndTips:{
        1: ['开启油站领取优惠券','营销能力'],
        2: ['开启油站排序营销能力','提高油站曝光'],
        3: ['开启召唤周边流失司机','营销能力'],
        4: ['开启召唤周边沉默司机','营销能力']
      },
      backImg:{
        1: `${ossUrl}intelligence/card-blue.png`,
        2: `${ossUrl}intelligence/card-gray.png`,
        3: `${ossUrl}intelligence/card-yellow.png`,
        4: `${ossUrl}intelligence/card-purple.png`,
      },
      btn:{
        1: '#6591FE',
        2: '#8798B6',
        3: '#D9AC63',
        4: '#797BB6',
      },
      btnName:'去体验',
    }
  }
}
</script>

<style lang="less" scoped>
.suggest-card-wrapper {
  margin-top: 10px;
  border-radius: 8px;
  height: 120px;
  padding-left: 28px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .left {
    width: 70%;
    .content {
      margin-top: 24px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #FFFFFF;
      >div:nth-child(1) {
        padding: 3px 0;
      }
    }
    .btn{
        width: 79px;
        height: 24px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-top: 15px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        cursor: pointer;
      }
  }
}
</style>
